import React, {Component} from 'react'
import {
    Button, Dimensions, Modal, SafeAreaView, ScrollView, SegmentedControlIOS, Switch, Text, TextInput,
    TouchableHighlight,
    View
} from "react-native";
import ScrollableTabView, {ScrollableTabBar, DefaultTabBar} from "react-native-scrollable-tab-view";
import ItemListPage from "../ItemListPage/ItemListPage";
import TabIndex from "../TabIndex/TabIndex";
import LinearGradient from "react-native-linear-gradient";


export default class Index extends Component {
    constructor() {
        super();
        this.state = {
            girl: false,
            modalVisible: false
        }
    }

    render() {
        return (
            <LinearGradient colors={['#f42', '#f42', '#fff', '#fff']} style={{flex: 1}}>
                <SafeAreaView style={{flex: 1}}>
                    <View style={{flex: 1}}>
                        <View style={{height: 50, flexDirection: 'row'}}>
                            <View style={{height: 50, flex: 0.25}}>
                                <SegmentedControlIOS
                                    values={["男", "女"]}
                                    style={{
                                        borderRadius: 15,
                                        height: 30,
                                        margin: 10,
                                        backgroundColor: "#eee",
                                        borderWidth: 2,
                                        borderColor: "#fff"
                                    }}
                                    tintColor="#f42"
                                    selectedIndex={0}
                                />
                                {/*<Switch*/}
                                {/*style={{*/}
                                {/*borderRadius: 16,*/}
                                {/*height: 32,*/}
                                {/*margin: 12,*/}
                                {/*backgroundColor: "#eee",*/}
                                {/*borderWidth: 1,*/}
                                {/*borderColor: "#fff"*/}
                                {/*}}*/}
                                {/*value={this.state.girl}*/}
                                {/*trackColor={{false: "#eee", true: "#eee"}}*/}
                                {/*tintColor="#eee"*/}
                                {/*thumbColor="#f40"*/}
                                {/*onValueChange={(value) => {*/}
                                {/*console.log(value);*/}
                                {/*this.setState({girl: value})*/}
                                {/*}}*/}
                                {/*/>*/}


                            </View>
                            <View style={{height: 50, flex: 0.75}}>
                                <TextInput
                                    // keyboardType="web-search"
                                    style={{
                                        margin: 10,
                                        height: 30,
                                        backgroundColor: "white",
                                        borderWidth: 1,
                                        borderColor: "#ddd",
                                        paddingLeft: 10

                                    }}
                                    autoCapitalize="none"
                                    editable={true}
                                    borderRadius={5}
                                    placeholder="搜索商品名或店铺名称"
                                    onChangeText={(text) => console.log(text)}
                                />
                            </View>

                        </View>
                        <View style={{flex: 1}}>
                            <ScrollableTabView
                                style={{flex: 1, backgroundColor: "#feffff"}}
                                renderTabBar={() => <ScrollableTabBar/>}
                                tabBarUnderlineStyle={{
                                    width: 40,
                                    marginLeft: 15,
                                    marginRight: 15,
                                    backgroundColor: "#f50"
                                }}
                                tabBarActiveTextColor="#f50"

                            >
                                <View style={{ flex: 1, backgroundColor: "#eeeeee"}} tabLabel='全部'>
                                    <TabIndex navigation={this.props.navigation}/>
                                </View>

                                <View style={{margin: 10, flex: 1}} tabLabel='男装'>
                                    <ItemListPage/>
                                </View>
                                <Text style={{marginLeft: 10}} tabLabel='男鞋'>男鞋</Text>
                                <Text style={{marginLeft: 10}} tabLabel='洗护'>洗护</Text>
                                <Text style={{marginLeft: 10}} tabLabel='内衣'>内衣</Text>
                                <Text style={{marginLeft: 10}} tabLabel='成人'>成人</Text>
                                <Text style={{marginLeft: 10}} tabLabel='百货'>百货</Text>
                                <Text style={{marginLeft: 10}} tabLabel='手机'>手机</Text>
                                <Text style={{marginLeft: 10}} tabLabel='家电'>家电</Text>
                                <Text style={{marginLeft: 10}} tabLabel='运动'>运动</Text>
                                <Text style={{marginLeft: 10}} tabLabel='食品'>食品</Text>
                            </ScrollableTabView>
                        </View>
                    </View>
                </SafeAreaView>
            </LinearGradient>
        )
    }
}